import React, { useEffect, useState } from 'react'
import { PullRefresh, Tabs, Toast } from 'react-vant'
import Item from './Item'
import { Arrow, Wechat, Bars } from '@react-vant/icons';
import axios from '../../http/axios'
import { Sticky } from 'react-vant';
import './shou.scss'

export default function () {
  let [list, setlist] = useState([])
  let getall = async () => {
    let res = await axios.get('/look')
    console.log(res.data.vllist);
    console.log(res + 11);
    setlist(res.data.vllist)
  }

  const [start, setstart] = useState(0)
  const render = () => {
    let num = Math.floor(Math.random() * 15)
    console.log(num);
    setstart(num)
  }
  const onRefresh = showToast => {
    render()
    return new Promise(resolve => {
      console.log(11);
      setTimeout(() => {
        if (showToast) {
          Toast.info('刷新成功')
        }
        resolve(true)
      }, 1000)
    })
  }
  useEffect(() => {
    render()
    getall()
  }, [])



  return (
    <div className='demo-pull-refresh'>
      <PullRefresh successText="刷新成功" onRefresh={onRefresh} style={{ overflow: 'auto' }}>

        {list.slice(start,start+3).map((item, index) => {
          console.log(item);
          return <div key={index} className='ge'>
            <div className='tu'>
              <video src={item.video} alt="" style={{width:'100%',height:'100%'}} controls/>

            </div>
            <div className='zi'>
              {item.title}
            </div>
            <div className='bai'>
              <div className='tou'>
                <img src={item.uid.avatar} alt="" className='tt' />
              </div>
              <div className='yh'>
                {item.uid.name}
              </div>
              <div className='wei'>
                <img src='https://www.pabzibo.live:3001/upload/wei.png' />
              </div>
              <div className='zan'>

                111
              </div>
              <div className='yb'>
                <img src="https://www.pabzibo.live:3001/upload/3点.png" className='ydd' />
              </div>
            </div>
          </div>
        })}


      </PullRefresh>


    </div>
  )
}

